<template>
	<view>
		<view></view>
		<view>
			<!-- 上方分类 -->
			<scroll-view scroll-x class="scrollSort">
				<view :style="selected==1?'background-color: #42b983; color:black':null " class="item"
					@click="searchGreenCard">绿卡优惠
				</view>
				<view :style="selected==2?'background-color: #42b983; color:black':null " class="item"
					@click="searchKillGood">限时抢购</view>
				<view :style="selected==3?'background-color: #42b983; color:black':null " class="item"
					@click="selRecommendGood">推荐商品</view>
			</scroll-view>
		</view>
		<view class="leftSort">
			<!-- 左侧分类 -->
			<view class="leftSortItem" :style="o.id==changeColor?'background-color:#42b983':null" v-for="o in sortList"
				@click="searchItem(o.id)">{{o.typeName}}</view>
		</view>
		<view class="itemDetail">
			<uni-card v-for="o in goodList" title="" sub-title="">
				<image class="itemImg" :src="o.imgSrc" mode="aspectFill" @click.native="jumpDetail(o.id)"></image>
				<view class=" right">
					<view>{{o.title}} {{o.breed}}</view>
					<view v-if="killStatus">原价:￥{{o.oldPrice}}</view>
					<view class="uni-body" style="font-size: 35rpx;">￥ {{o.price}}</view>
					<uni-icons v-if="addBtn" class="ico" type="cart" size="40" style="color: #e94b64;"
						@click.native="addShoppingCart(o.id)"></uni-icons>
				</view>
			</uni-card>
		</view>
	</view>
</template>

<script>
	// import { configProviderProps } from 'wot-design-uni/components/wd-config-provider/types';
	export default {
		onLoad(e) {
			this.selAllSort();
			this.searchItem(this.changeColor);
			this.killStatus = false;
			if (e.num == 111) {
				this.searchKillGood();
				this.killStatus = true;
			} else if (e.num == 222) {
				this.searchGreenCard();
				this.killStatus = false;
			}
		},
		data() {
			return {
				sortList: [],
				changeColor: 1,
				goodList: [],
				selected: 0,
				killStatus: false,
				addBtn: true
			};
		},
		methods: {
			addShoppingCart(itemId) {
				// console.log(itemId);
				let jwt = uni.getStorageSync('authority');
				uni.request({
					url: 'api/appuser/addShoppingCart',
					method: 'GET',
					header: {
						"authority": jwt
					},
					data: {
						itemId: itemId
					},
					success: (res) => {
						console.log(res);
						if (res.data.code == 200) {
							uni.showToast({
								icon: 'success',
								title: '购物车添加成功'
							})
						} else if (res.data.code == 10000) {
							uni.showToast({
								icon: 'error',
								title: '购物车中已有该商品'
							})
						}
					}
				})
			},
			jumpDetail(id) {
				uni.navigateTo({
					url: '/pages/itemDetail/itemDetail?id=' + id,
				})
			},
			selRecommendGood() {
				this.addBtn = true;
				this.killStatus = false;
				this.changeColor = 0;
				this.selected = 3;
				uni.request({
					url: "api/appindex/selRecommendGood",
					method: 'GET',
					success: (res) => {
						console.log(res);
						if (res.statusCode == 200) {
							this.goodList = res.data.data;
						}
					}
				})
			},
			searchKillGood() {
				uni.navigateTo({
					url: "/pages/seckillGood/seckillGood"
				})
				// this.addBtn = false;
				// this.killStatus = true;
				// this.changeColor = 0;
				// this.selected = 2;
				// uni.request({
				// 	url: "api/appindex/selKillGood",
				// 	method: 'GET',
				// 	success: (res) => {
				// 		console.log(res);
				// 		if (res.statusCode == 200) {
				// 			this.goodList = res.data.data;
				// 		}
				// 	}
				// })
			},
			searchGreenCard() { // 绿卡优惠产品
				this.addBtn = true;
				this.killStatus = false;
				this.changeColor = 0;
				this.selected = 1;
				uni.request({
					url: "api/appindex/selGreenCard",
					method: 'GET',
					success: (res) => {
						console.log(res);
						if (res.statusCode == 200) {
							this.goodList = res.data.data;
						}
					}
				})
			},
			searchItem(id) {
				this.selected = 0;
				this.changeColor = id;
				this.killStatus = false;
				console.log(this.changeColor);
				// 查询 该类下的商品
				uni.request({
					url: "api/appindex/selSortGoods",
					method: 'GET',
					data: {
						id: this.changeColor
					},
					success: (res) => {
						console.log(res);
						if (res.statusCode == 200) {
							this.goodList = res.data.data;
						}
					}
				})
			},
			selAllSort() {
				uni.request({
					url: "api/appindex/selAllSort",
					method: 'GET',
					success: (res) => {
						// console.log(res);
						if (res.statusCode == 200) {
							this.sortList = res.data.data;
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f4f4f6;
	}

	.scrollSort {
		background-color: #f5f7f9;
		height: 160rpx;
		white-space: nowrap;
		margin-top: 20rpx;

		::-webkit-scrollbar {
			display: none;
			width: 0 !important;
			height: 0 !important;
			-webkit-appearance: none;
			background: transparent;
		}

		.item {
			display: inline-block;
			line-height: 150rpx;
			width: 150rpx;
			border-radius: 80rpx;
			background-color: #fff;
			margin-right: 10px;
			text-align: center;
			color: #999999;
		}
	}

	.leftSort {
		float: left;
		width: 130rpx;
		// height: 1310rpx;
		background-color: #f6f6f6;
		text-align: center;
		position: fixed;
		top: 280rpx;
		z-index: 999;

		.leftSortItem {
			line-height: 100rpx;
			font-size: 25rpx;
		}
	}

	.itemDetail {
		margin-left: 100rpx;

		text {
			font-size: 35rpx;
			color: #404040;
		}

		.itemImg {
			width: 250rpx;
			height: 200rpx;
		}

		.right {
			float: right;
			// background-color: gray;
			width: 250rpx;

			.ico {
				display: inline-block;
				margin-top: 90rpx;
				margin-left: 190rpx;
			}
		}
	}
</style>